<template>
  <div class="main">
    <div v-if="details" class="content">
      <el-carousel class="image">
        <el-carousel-item v-for="(item, index) in goodsImages" :key="index">
          <div class="image-container">
            <img :src="item.goodsImage" alt="商品图像" class="responsive-image"/>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="text">
        <div class="price">￥{{ details.price }}</div>
        <div class="name">名字：{{ details.title }}</div>
        <div class="place">
          发货地：{{ details.province }}{{ details.area }}
        </div>
        <div class="business">商家：{{ details.business }}</div>
        <div class="salesNum">月售：{{ details.salesNum }}</div>
        <el-input-number
          v-model="num"
          :min="1"
          class="numberCount"
        />
        <br/>
        <el-button class="button" type="success" @click="addToShoppingCar"> 添加到购物车 </el-button>
        <el-button class="button" type="warning" @click="purchaseNow"> 立即购买 </el-button>
      </div>
    </div>
    <div class="goodsDetails">
      <h3>商品详细信息</h3>
      <div class="goodsDetails-container">
        <div v-for="(detail, index) in goodsDetails" :key="index" class="goodsDetail-item">
          <img :src="detail.goodsDetail" alt="详细信息图" class="responsive-goodsDetail-image"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getGoodsDetailDataService, getGoodsDetailsImageService, getGoodsImageService } from "@/api/goods";
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { addToShoppingCarService } from "@/api/shoppingCar";
import { ElMessage } from 'element-plus';
import { useCustomerInfoStore } from "@/store/customerInfo";
import { useGoodsInfoStore } from "@/store/goods";

const goods_id = reactive({
  id: "0",
});
const route = useRoute();
const id = ref(null);
const details = ref(null);
const num = ref(1)
const customerInfoStore = useCustomerInfoStore();
const router = useRouter();
const goodsInfoStore = useGoodsInfoStore();
const goodsImages = ref([]);
const goodsDetails = ref([]);

const getGoods = async() => {
    id.value = route.query.id;
    goods_id.id = id.value;
    let item = await getGoodsDetailDataService(goods_id.id);
    details.value = item.data;
    let resultImage = await getGoodsImageService(goods_id.id);
    goodsImages.value = resultImage.data;
    let resultDetail = await getGoodsDetailsImageService(goods_id.id);
    goodsDetails.value = resultDetail.data;
}

getGoods();

//加入购物车调用的函数
const addToShoppingCar = async() => {
  const data = {
    customerName: customerInfoStore.customerInfo.name,
    businessName: details.value.business,
    goodsName: details.value.title,
    goodsNum: num.value,
    isPurchase: "true",
    image: details.value.image,
    price: details.value.price
  }
  const result = await addToShoppingCarService(data);
  ElMessage({
    type: result.message!=='操作成功' ? 'error' : 'success',
    message: result.messagee!=='操作成功' ? result.message : '成功加入购物车',
  });
};

//立即购买调用的函数
const purchaseNow = () => {
  goodsInfoStore.setGoodsInfo([
    {
      'goodsName': details.value.title,
      'businessName': details.value.business,
      'goodsNum': num.value,
      'price': details.value.price,
      'image': details.value.image
    }
  ])
  const url = router.resolve({name: 'purchaseGoods'}).href;
  window.open(url, '_blank');
};

</script>

<style scoped>
html,
body {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

.main {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ccc;
}

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.image {
  width: 50%;
}

.responsive-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.content {
  display: flex;
  align-items: center;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 2px;
  width: 50%;
}

.details {
  height: auto;
  width: 30%;
  margin-right: 20px;
}

.text {
  flex: 1;
  text-align: left;
}

.price,
.business,
.place,
.salesNum,
.name,
.numberCount {
  margin-bottom: 20px;
}

.goodsDetails {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 2px;
  width: 50%;
}

.goodsDetails-container {
  height: auto;
  flex-direction: column;
  width: 100%;
  margin-right: 20px;
}

.goodsDetails-item {
  flex: 1;
  text-align: left;
}

.responsive-goodsDetail-image {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}
</style>